<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="shortcut icon" href="favicons/1.png">

    <link rel="stylesheet" href="__HBCSS__/reset.css">
    <link rel="stylesheet" href="__HBCSS__/index.css">
</head>
<body>

<header class="header" id="header">

    <div class="header-bg"></div>
    <div class="header-top">

        <div class="container">
            <a href="#" class="header-logo"></a>
            <nav class="header-nav">


                <a href="#" class="item item-cur">发现</a>
                <a href="#" class="item">最新</a>
                <a href="#" class="item new-icon">美思<i></i></a>
                <a href="#" class="item">教育</a>
                <a href="#" class="nav-more"></a>
                <div class="nav-more__hover">
                    <div class="wrapper">
                        <div class="top-part">
                            <a href="#">移动应用</a>
                            <a href="#">采集工具</a>
                            <a href="#">招聘</a>
                        </div>
                        <div class="middle-part">
                            <a href="#">UI/UX</a>
                            <a href="#">平面</a>
                            <a href="#">插画/漫画</a>
                            <a href="#">家居/家装</a>
                            <a href="#">女装/搭配</a>
                            <a href="#">男士/风尚</a>
                            <a href="#">婚礼</a>
                            <a href="#">平面</a>
                            <a href="#">工业设计</a>
                            <a href="#"><b>兴趣/生活 »</b></a>
                        </div>
                        <div class="bottom-part">
                            <i class="pin-icon sprite_icon"></i>
                            <a href="#">活动</a>
                            <span class="dot">·</span>
                            <a href="#">周刊</a>
                            <span class="dot">·</span>
                            <a href="#">关于</a>
                            <span class="dot">·</span>
                            <a href="#">反馈</a>
                            <span class="dot">·</span>
                            <a href="#">博客</a>
                        </div>
                    </div>
                </div>
            </nav>








            <div class="header-user">
                <a href="#" class="register">注册</a>
                <a href="#" class="login">登录</a>
            </div>





            <div class="search">
                <form action="#">
                    <input type="text" class="search-text" placeholder="搜索你喜欢的">
                    <a href="#" class="search-btn sprite_icon"></a>
                </form>
            </div>
        </div>
    </div>
    <div class="banner">
        <h2 class="banner-titlte"><img src="__HBIMGS__images/banner-title_img.svg" alt="#"></h2>
        <div class="search">
            <form action="#">
                <input type="text" class="search-text" placeholder="搜索你喜欢的">
                <a href="#" class="search-btn sprite_icon"></a>
            </form>
        </div>
        <p class="search-hot">热门搜索：<a href="#">匠人匠心</a></p>
    </div>
    <div class="header-bg__info">图片：<a href="#">插画师苏寒</a></div>
</header>

<div class="main">
    <div class="main-inner">
        <div class="main-list">
            <div class="recommend-line">
                <span>大家正在关注</span>
            </div>
            <div class="main-list__wrapper clearfix">
                <a href="#"><img src="__HBIMGS__images/cont/main-list__img1.jpg" alt="#"><span>SD娃娃</span></a>
                <a href="#"><img src="__HBIMGS__images/cont/main-list__img2.jpg" alt="#"><span>旧物改造</span></a>
                <a href="#"><img src="__HBIMGS__images/cont/main-list__img3.jpg" alt="#"><span>古风海报</span></a>
                <a href="#"><img src="__HBIMGS__images/cont/main-list__img4.jpg" alt="#"><span>简笔画</span></a>
                <a href="#"><img src="__HBIMGS__images/cont/main-list__img5.jpg" alt="#"><span>夜景手机壁纸</span></a>
                <a href="#"><img src="__HBIMGS__images/cont/main-list__img6.jpg" alt="#"><span>杨洋</span></a>
                <a href="#"><img src="__HBIMGS__images/cont/main-list__img7.jpg" alt="#"><span>条纹服饰</span></a>
            </div>
        </div>
        <div class="main-waterfall">
            <div class="recommend-line">
                <span>为您推荐</span>
            </div>
            <div class="main-waterfall__wrapper">
                <div class="main-waterfall__row clearfix">
                    <div class="waterfall-imgbox waterfall-box"><a href="#"><img src="__HBIMGS__images/cont/waterfall_img1.jpg" alt="#"></a></div>
                    <div class="waterfall-box">
                        <div class="waterfall-info waterfall-info__top">
                            <i class="title"></i>
                            <h3><a href="#">乐高蝙蝠侠大电影</a></h3>
                            <p><span>45 采集</span><span>119 粉丝</span></p>
                            <span>来自<a href="#">华纳兄弟电影</a></span>
                            <i class="info-arrow info-arrow__left"></i>
                        </div>
                        <div class="waterfall-info waterfall-info__bom">
                            <i class="title"></i>
                            <h3><a href="#">【2017开年之作】“稀缺之美”系列</a></h3>
                            <p><span>45 采集</span><span>119 粉丝</span></p>
                            <span>来自<a href="#">华纳兄弟电影</a></span>
                            <i class="info-arrow info-arrow__right"></i>
                        </div>
                    </div>
                    <div class="waterfall-imgbox waterfall-box"><a href="#"><img src="__HBIMGS__images/cont/waterfall_img2.jpg" alt="#"></a></div>
                    <div class="waterfall-imgbox waterfall-box">
                        <a href="#"><img src="__HBIMGS__images/cont/waterfall_img3.jpg" alt="#"></a>
                        <div class="waterfall-collect">
                            <i class="title"></i>
                            <div class="info">
                                <h4><a href="#">【Gentle.|温存】</a></h4>
                                <p><span>688 采集</span><span>749 粉丝</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-waterfall__row clearfix">
                    <div class="waterfall-imgbox waterfall-box">
                        <a href="#"><img src="__HBIMGS__images/cont/waterfall_img4.jpg" alt="#"></a>
                        <div class="waterfall-collect">
                            <i class="title"></i>
                            <div class="info">
                                <h4><a href="#">【Gentle.|温存】</a></h4>
                                <p><span>688 采集</span><span>749 粉丝</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="waterfall-imgbox waterfall-box">
                        <a href="#"><img src="__HBIMGS__images/cont/waterfall_img5.jpg" alt="#"></a>
                    </div>
                    <div class="waterfall-box">
                        <div class="waterfall-info waterfall-info__top">
                            <i class="title"></i>
                            <h3><a href="#">乐高蝙蝠侠大电影</a></h3>
                            <p><span>45 采集</span><span>119 粉丝</span></p>
                            <span>来自<a href="#">华纳兄弟电影</a></span>
                            <i class="info-arrow info-arrow__left"></i>
                        </div>
                        <div class="waterfall-info waterfall-info__bom">
                            <i class="title"></i>
                            <h3><a href="#">【2017开年之作】“稀缺之美”系列</a></h3>
                            <p><span>45 采集</span><span>119 粉丝</span></p>
                            <span>来自<a href="#">华纳兄弟电影</a></span>
                            <i class="info-arrow info-arrow__right"></i>
                        </div>
                    </div>
                    <div class="waterfall-imgbox waterfall-box">
                        <a href="#"><img src="__HBIMGS__images/cont/waterfall_img6.png" alt="#"></a>
                    </div>
                </div>
                <div class="main-waterfall__row clearfix">
                    <div class="waterfall-imgbox waterfall-box"><a href="#"><img src="__HBIMGS__images/cont/waterfall_img7.jpg" alt="#"></a></div>
                    <div class="waterfall-box">
                        <div class="waterfall-info waterfall-info__top">
                            <i class="title"></i>
                            <h3><a href="#">乐高蝙蝠侠大电影</a></h3>
                            <p><span>45 采集</span><span>119 粉丝</span></p>
                            <span>来自<a href="#">华纳兄弟电影</a></span>
                            <i class="info-arrow info-arrow__left"></i>
                        </div>
                        <div class="waterfall-info waterfall-info__bom">
                            <i class="title"></i>
                            <h3><a href="#">【2017开年之作】“稀缺之美”系列</a></h3>
                            <p><span>45 采集</span><span>119 粉丝</span></p>
                            <span>来自<a href="#">华纳兄弟电影</a></span>
                            <i class="info-arrow info-arrow__right"></i>
                        </div>
                    </div>
                    <div class="waterfall-imgbox waterfall-box"><a href="#"><img src="__HBIMGS__images/cont/waterfall_img8.jpg" alt="#"></a></div>
                    <div class="waterfall-imgbox waterfall-box">
                        <a href="#"><img src="__HBIMGS__images/cont/waterfall_img9.jpg" alt="#"></a>
                        <div class="waterfall-collect">
                            <i class="title"></i>
                            <div class="info">
                                <h4><a href="#">【Gentle.|温存】</a></h4>
                                <p><span>688 采集</span><span>749 粉丝</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-waterfall__row clearfix">
                    <div class="waterfall-imgbox waterfall-box">
                        <a href="#"><img src="__HBIMGS__images/cont/waterfall_img10.jpg" alt="#"></a>
                        <div class="waterfall-collect">
                            <i class="title"></i>
                            <div class="info">
                                <h4><a href="#">【Gentle.|温存】</a></h4>
                                <p><span>688 采集</span><span>749 粉丝</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="waterfall-imgbox waterfall-box">
                        <a href="#"><img src="__HBIMGS__images/cont/waterfall_img11.jpg" alt="#"></a>
                    </div>
                    <div class="waterfall-box">
                        <div class="waterfall-info waterfall-info__top">
                            <i class="title"></i>
                            <h3><a href="#">乐高蝙蝠侠大电影</a></h3>
                            <p><span>45 采集</span><span>119 粉丝</span></p>
                            <span>来自<a href="#">华纳兄弟电影</a></span>
                            <i class="info-arrow info-arrow__left"></i>
                        </div>
                        <div class="waterfall-info waterfall-info__bom">
                            <i class="title"></i>
                            <h3><a href="#">【2017开年之作】“稀缺之美”系列</a></h3>
                            <p><span>45 采集</span><span>119 粉丝</span></p>
                            <span>来自<a href="#">华纳兄弟电影</a></span>
                            <i class="info-arrow info-arrow__right"></i>
                        </div>
                    </div>
                    <div class="waterfall-imgbox waterfall-box">
                        <a href="#"><img src="__HBIMGS__images/cont/waterfall_img12.png" alt="#"></a>
                    </div>
                </div>
                <div class="main-waterfall__row clearfix">
                    <div class="waterfall-imgbox waterfall-box"><a href="#"><img src="__HBIMGS__images/cont/waterfall_img13.jpg" alt="#"></a></div>
                    <div class="waterfall-box">
                        <div class="waterfall-info waterfall-info__top">
                            <i class="title"></i>
                            <h3><a href="#">乐高蝙蝠侠大电影</a></h3>
                            <p><span>45 采集</span><span>119 粉丝</span></p>
                            <span>来自<a href="#">华纳兄弟电影</a></span>
                            <i class="info-arrow info-arrow__left"></i>
                        </div>
                        <div class="waterfall-info waterfall-info__bom">
                            <i class="title"></i>
                            <h3><a href="#">【2017开年之作】“稀缺之美”系列</a></h3>
                            <p><span>45 采集</span><span>119 粉丝</span></p>
                            <span>来自<a href="#">华纳兄弟电影</a></span>
                            <i class="info-arrow info-arrow__right"></i>
                        </div>
                    </div>
                    <div class="waterfall-imgbox waterfall-box"><a href="#"><img src="__HBIMGS__images/cont/waterfall_img14.png" alt="#"></a></div>
                    <div class="waterfall-imgbox waterfall-box">
                        <a href="#"><img src="__HBIMGS__images/cont/waterfall_img15.jpg" alt="#"></a>
                        <div class="waterfall-collect">
                            <i class="title"></i>
                            <div class="info">
                                <h4><a href="#">【Gentle.|温存】</a></h4>
                                <p><span>688 采集</span><span>749 粉丝</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="getMore-line">
                <a href="#">加载更多</a>
            </div>
        </div>
        <div class="main-category">
            <div class="head clearfix">
                <span>以分类浏览瓣瓣</span>
                <a href="#">所有采集 »</a>
            </div>
            <div class="cont clearfix">
                <ul class="main-category__group">
                    <li class="item"><a href="#">UI/UX</a></li>
                    <li class="item"><a href="#">平面</a></li>
                    <li class="item"><a href="#">插画/漫画</a></li>
                    <li class="item"><a href="#">家居/家装</a></li>
                    <li class="item"><a href="#">女装/搭配</a></li>
                    <li class="item"><a href="#">男士/风尚</a></li>
                    <li class="item"><a href="#">婚礼</a></li>
                </ul>
                <ul class="main-category__group">
                    <li class="item"><a href="#">UI/UX</a></li>
                    <li class="item"><a href="#">平面</a></li>
                    <li class="item"><a href="#">插画/漫画</a></li>
                    <li class="item"><a href="#">家居/家装</a></li>
                    <li class="item"><a href="#">女装/搭配</a></li>
                    <li class="item"><a href="#">男士/风尚</a></li>
                    <li class="item"><a href="#">婚礼</a></li>
                </ul>
                <ul class="main-category__group">
                    <li class="item"><a href="#">UI/UX</a></li>
                    <li class="item"><a href="#">平面</a></li>
                    <li class="item"><a href="#">插画/漫画</a></li>
                    <li class="item"><a href="#">家居/家装</a></li>
                    <li class="item"><a href="#">女装/搭配</a></li>
                    <li class="item"><a href="#">男士/风尚</a></li>
                    <li class="item"><a href="#">婚礼</a></li>
                </ul>
                <ul class="main-category__group">
                    <li class="item"><a href="#">UI/UX</a></li>
                    <li class="item"><a href="#">平面</a></li>
                    <li class="item"><a href="#">插画/漫画</a></li>
                    <li class="item"><a href="#">家居/家装</a></li>
                    <li class="item"><a href="#">女装/搭配</a></li>
                    <li class="item"><a href="#">男士/风尚</a></li>
                    <li class="item"><a href="#">婚礼</a></li>
                </ul>
                <ul class="main-category__group">
                    <li class="item"><a href="#">生活百科</a></li>
                    <li class="item"><a href="#">教育</a></li>
                    <li class="item"><a href="#">运动</a></li>
                    <li class="item"><a href="#">搞笑</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<footer class="footer" id="footer">
    <div class="footer-column__wrapper">
        <div class="footer-column">
            <a href="#" class="title">瓣瓣首页</a>
            <a href="#">瓣瓣采集工具</a>
            <a href="#">瓣瓣采集工具</a>
        </div>
        <div class="footer-column">
            <a href="#" class="title">联系与合作</a>
            <a href="#">联系我们</a>
            <a href="#">用户反馈</a>
            <a href="#">瓣瓣 LOGO 标准文档</a>
        </div>
        <div class="footer-column">
            <a href="#" class="title">移动客户端</a>
            <a href="#">瓣瓣 iPhone 版</a>
            <a href="#">瓣瓣 Android 版</a>
            <a href="#">瓣瓣 HD</a>
        </div>
        <div class="footer-column footer-followus">
            <a href="#" class="title">关注我们</a>
            <a href="#">新浪微博：@瓣瓣网</a>
            <a href="#">官方 QQ：188126952</a>
            <a href="#" class="weixin">官方微信：<img src="__HBIMGS__images/footer-weixin.png" alt="#"><img src="__HBIMGS__images/footer_weixin_orcode.png" alt="#" class="orcode"></a>
        </div>
    </div>
    <div class="footer-copyright">
        <p>© Huaban *******限公司<span class="divider">|</span><a href="#">*******号</a></p>
    </div>
</footer>

    <div class="elevator-wrap">
    <a href="javascript:;" id="elevator"></a>
    <a href="javascript:;" id="plus"></a>
    <div id="plus_popup">
        <a href="#"><i class="icon-upload"></i>添加采集</a>
        <a href="#"><i class="icon-board"></i>添加画板</a>
        <a href="#"><i class="icon-tool"></i>安装采集工具</a>
    </div>
</div>

<div class="user" id="user" >
    <div class="user-inner" style="height:330px;">
        <!-- 注册-->
        <img src="__HBIMGS__images/login_logo.png" alt="#" class="login-logo">
        <div  class="register mail-login ">

            <div  class="holder mail-login" style="margin-left: 120px" >
                <span  id="utab">*请输入手机号:</span>
                <input type="text" id="regName"  class="text tiana"  placeholder="请输入手机号" onblur="checkUser()" maxlength="11" >

                <span  id="ptab">*请输入密码:</span>
                <input type="password" id="regPass" class="password tiana" placeholder="密码长度6到12位" onblur="checkPass()">

                <span  id="rptab">*请再次输入密码:</span>
                <input type="password" id="regRePass" class="password tiana" placeholder=""  onblur="checkRepass()">
                <!--<button id="" class="login-up">这一条是验证条,等等再搞</button>-->
                <button  id="reg-up" class="login-up">注册</button>
            </div>
            <div class="switch-login">已有帐号？<a href="#">登录到瓣瓣</a></div>
        </div>

        <!--登录-->
        <div class="login" >
            <div class="holder" >
                <div class="with-line"><span>用第三方帐号登录瓣瓣</span></div>
                <div class="buttons">
                    <a href="#" class="weibo"></a>
                    <a href="#" class="qq"></a>
                    <a href="#" class="weixin"></a>
                    <a href="#" class="douban"></a>
                    <a href="#" class="renren"></a>
                </div>
                <div class="mail-login">
                    <span  id="ltab">*请输入手机号:</span>
                    <input type="text" id="loginName" class="tiana" placeholder="输入手机号" onblur="checkLoginUser()" maxlength="11">
                    <input type="password" id="loginPass" class="tiana" placeholder="密码长度6到12位" maxlength="12" minlength="6">

                    <label for="remember-me">
                        <input type="checkbox" id="remember" name="check" value="2">
                        记住密码
                    </label>

                    <button id="login-up" class="login-up">登录</button>
                </div>



                <div class="switch-register clearfix">
                    <p class="go-register">还没有瓣瓣帐号？<a href="#">点击注册»</a></p>
                </div>

            </div>
        </div>
        <div class="close"><span></span></div>

    </div>

</div>

<script src="__HBJS__/jquery.js"></script>
<script src="__HBJS__/script.js"></script>

<script>
// 注册
    $(function() {
        var regval = new Array();
        $('#reg-up').click(function(){
            regval.splice(0,regval.length);
            if(checkUser()&&checkPass()&&checkRepass()){
                regName =$('#regName').val();
                regPass =$('#regPass').val();
                regRePass =$('#regRePass').val();

                doreg()
            }else{
                alert('请正确填写注册信息')
            }

        })
    })

    function doreg(){
        $.ajax({
            method : 'post',
            url : '/huaban_reg/',
            data:{'name':regName,'pass':regPass,'regRePass':regRePass},
            dataType : 'json',
            success : function (data){
                // console.log(data);
                alert('注册成功')
                window.location.href='/huaban';
            },
            error : function() {
                alert('网络繁忙,注册失败');
            }
        });
    }

    //注册失焦验证
    //验证用户name,用手机注册
    function checkUser(){
        regName =$('#regName').val();
        var utab = document.getElementById('utab');
        if (!/^1(3\d|4[5-9]|5[0-35-9]|66|7[013-8]|8\d|9[89])\d{8}$/.test(regName)) {
            utab.innerHTML = '手机格式不正确';
            utab.style.color = ' #f00';
            return false;
        } else {
            utab.innerHTML = '* 验证通过!';
            utab.style.color = ' #0a0';
            return true;
        }
    }

    // 验证密码
    function checkPass(){
        regPass =$('#regPass').val();
        var ptab = document.getElementById('ptab');
        if (regPass.length < 6 || regPass.length > 18) {
            ptab.innerHTML = '* 密码长度不合法!';
            ptab.style.color = ' #f00';
            return false;
        } else {
            ptab.innerHTML = '* 验证通过!';
            ptab.style.color = ' #0a0';
            return true;
        }
    }
    // 验证再次输入密码
    function checkRepass(){
        // console.log('2323');
        regPass =$('#regPass').val();
        regRePass =$('#regRePass').val();
        var rptab = document.getElementById('rptab');
        if (regPass !== regRePass&&regPass!==''&& regRePass!=='') {
            rptab.innerHTML = '* 两次密码不一致';
            rptab.style.color = ' #f00';
            return false;
        } else {
            rptab.innerHTML = '* 验证通过!';
            rptab.style.color = ' #0a0';
            return true;
        }
    }








// 登录
    $(function() {
        var loginval = new Array();
        $('#login-up').click(function(){
                loginName =$('#loginName').val();
                loginPass =$('#loginPass').val();

                if($("#remember").prop("checked")){
                    remember =$('#remember').val();
                    console.log(remember);
                }else{
                    remember =1;
                }

                console.log(loginName);
                console.log(loginPass);
                dologin()
        })
    })


    function dologin(){
        $.ajax({
            method : 'post',
            url : '/huaban_login/',
            data:{'name':loginName,'pass':loginPass,'check':remember},
            dataType : 'json',
            success : function (data){
                if(data==null){
                    alert('账号或密码错误');
                }else{
                    alert('登录成功')
                    window.location.href='/huaban';
                }
            },
            error : function() {
                alert('网络繁忙,登录失败');
            }
        });
    }



    function checkLoginUser(){
        loginName =$('#loginName').val();
        var ltab = document.getElementById('ltab');
        if (!/^1(3\d|4[5-9]|5[0-35-9]|66|7[013-8]|8\d|9[89])\d{8}$/.test(loginName)) {
            ltab.innerHTML = '手机格式不正确';
            ltab.style.color = ' #f00';
            return false;
        } else {
            ltab.innerHTML = '* 验证通过!';
            ltab.style.color = ' #0a0';
            return true;
        }
    }


</script>

</body>
</html>